<template>
  <div class="v-dialog">
    <el-dialog :visible.sync="isOpen"
               :width="width"
               :fullscreen="fullscreen"
               @close="close"
               :append-to-body="true"
               :custom-class="!fullscreen ? 'dialog-fullscreen': ''"
               :close-on-click-modal="false"
               :destroy-on-close="true">
      <div slot="title">
        <div class="flex-bc mr20 dialog-title">
          <div class="left">出租方选择</div>
          <div class="right pr20">
            <span class="el-icon-full-screen cursor"
                  @click="fullscreen=!fullscreen"></span>
          </div>
        </div>
      </div>
      <div>
        <el-row>
          <el-col align="left"
                  :span="24">
            <el-input style="width: 200px;padding: 5px"
                      placeholder="请输入名称"
                      v-model="lessorName">
            </el-input>
            <el-button type="primary"
                       @click="queryData">查询</el-button>
            <el-button type="primary"
                       @click="add">新增出租方</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
                  align="right">
            <el-pagination @size-change="handleCurrentChange"
                           @current-change="handleCurrentChange"
                           :current-page="page.currentPage"
                           :page-sizes="[10, 20, 50]"
                           :page-size="10"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="page.total">
            </el-pagination>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table ref="clientTable"
                      :data="clientInfos"
                      stripe
                      style="width: 100%">
              <el-table-column width="80px"
                               type="selection">
              </el-table-column>
              <el-table-column prop="lessorName"
                               label="出租方名称"
                               width="180"
                               align="center">
              </el-table-column>
              <el-table-column prop="lessorType"
                               label="客户类型"
                               width="150"
                               align="center">
                <template slot-scope="scope">{{scope.row.lessorType | dict('lessee_type')}}
                </template>
              </el-table-column>
              <el-table-column prop="certificateType"
                               label="证件类型"
                               align="center"
                               width="150">
                <template slot-scope="scope">
                  <span v-if="scope.row.lessorType=='0'">
                    {{scope.row.certificateType | dict('personage_certificate_type')}}
                  </span>
                  <span v-if="scope.row.lessorType!='0'">
                    {{scope.row.certificateType | dict('commercial_certificate_type')}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="certificateNum"
                               label="证件号码"
                               align="center"
                               width="200">
              </el-table-column>
              <el-table-column prop="phoneNum"
                               label="手机号码"
                               align="center"
                               width="120">
              </el-table-column>
              <el-table-column prop="addressInfo"
                               label="详细地址"
                               width="250"
                               align="center">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="ok()">确定</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//物业选择组件
import { fetchList } from '@/views/wy-lessor/landlord/api/lessor'
export default {
  name: 'client-select',
  props: {
    width: {
      type: String,
      default: '1200px',
    },
  },
  data() {
    return {
      lessorName: '',
      isOpen: false,
      fullscreen: false,
      clientInfos: [], //物业列表
      selectedClientInfos: [], //当前选择的物业列表，

      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    }
  },

  methods: {
    show() {
      this.isOpen = true
    },

    handleCurrentChange(currentPage) {
      //alert(currentPage);
      this.page.currentPage = currentPage
      this.queryData()
    },

    queryData() {
      //查询物业,按项目或房间名，模糊查询
      //alert("暂无数据");
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          { lessorName: this.lessorName }
        )
      )
        .then((response) => {
          //alert(JSON.stringify(response));
          if (response.data.code == 0) {
            this.clientInfos = response.data.data.records
            this.page.total = response.data.data.total
          } else {
            this.$alert(
              '服务器返回异常' + response.data.code + response.data.msg
            )
          }
        })
        .catch((reason) => {
          this.$alert('出错了' + reason)
        })
    },
    add() {
      this.$router.push({ path: '/wy-lessor/lessor-manage/add' })
    },

    ok() {
      this.selectedClientInfos = this.$refs.clientTable.selection
      //alert("选择好数据了"+JSON.stringify(selectData));
      this.$emit('completeSelect', this.selectedClientInfos) //选择ok
      this.isOpen = false
    },
    close() {
      this.isOpen = false
    },
  },
}
</script>

<style scoped lang="scss">
.execution {
  max-height: 70vh;
  overflow-y: auto;
}

.dialog-title {
  position: relative;
  top: -1px;

  .left {
    font-size: 18px;
  }

  .right {
    padding: 4px;
    position: relative;
    top: -2px;
  }
}
</style>


